<template>
	<t-modal
        destroyOnClose
        :title="title"
        :width="450"
        :visible="visible"
        @cancel="() => {$emit('cancel')}"
    >
		<template slot="footer">
			<a-button key="cancel" @click="() => {$emit('cancel')}">
			取消
			</a-button>
			<a-button key="ok" type="primary" :loading="loading" @click="ok">
			确定
			</a-button>
		</template>
		<template>
			<div style="display: flex;justify-content: space-around;">
				<div class="card-item" :class="{ 'selected-card': syncType === 'org' }" @click="cardClick('org')">
					<div class="img-box">
						<a-icon type="team" class="card-icon"/>
					</div>
					<div class="text-box">
						<div class="title">同步组织</div>
					</div>
				</div>
				<div class="card-item" :class="{ 'selected-card': syncType === 'user' }" @click="cardClick('user')">
					<div class="img-box">
						<a-icon type="user" class="card-icon"/>
					</div>
					<div class="text-box">
						<div class="title">同步用户</div>
					</div>
				</div>
			</div>
            <div v-if="showSelect" style="margin-top: 10px;">
                <a-select placeholder="请选择要同步的方式" style="width: 100%;" v-model="syncMode">
                    <a-select-option value="import">
                        {{ configType === '1' ? '企业微信同步到本地' : '阿里钉钉同步到本地' }}
                    </a-select-option>
                </a-select>
            </div>
		</template>
	</t-modal>
</template>

<script>
	export default {
		props: {
			visible: {
				type: Boolean,
				required: true
			},
            model: {
                type: Object,
            },
		},
		data() {
			return {
				title: '同步配置',
                showSelect: false,
				configType: null, // 三方应用类型
                syncType: null, // 选择的类型（组织/人员）
                syncMode: 'import', // 选择的同步方式
				loading: false,
			};
		},
        watch: {
            visible(val) {
                if (!val) {
                    this.showSelect = false;
                    this.syncType = null;
                    this.syncMode = 'import';
                };
            },
			model: {
				deep: true,
				immediate: true,
				handler(newVal, oldVal) {
					if (newVal) {
						this.configType = newVal.configType;
						this.title = newVal.configType === '2' ? '阿里钉钉同步配置' : '企业微信同步配置';
					}
				},
			},
        },
		methods: {
			cardClick(e) {
				if (e) {
                    this.syncType = e;
                    this.showSelect = true;
                }
			},
            ok() {
                if (!this.syncType) {
                    this.$message.warning('请先选择要同步的对象', 1.5);
                } else {
                    if (this.syncMode) {
						this.loading = true;
						let url = '';
						const params = new URLSearchParams();
						params.append('uuid', this.model.uuid);

						if (this.syncType === 'org') {
							url = '/mdata/thirdDingtalk/allDingDingOrganizeToLocal';
						} else {
							url = '/mdata/thirdDingtalk/allDingDingUserToLocal';
						};
						url += '?' + params.toString();

						this.$get(url).then(res => {
							if (res.statusCode === 200) {
								this.$message.success(res.message ? res.message : '同步成功', 1.5);
								this.syncVisible = false;
								this.loading = false;
								this.$emit('ok');
							} else {
								this.loading = false;
								this.$message.error(res.message ? res.message : '同步失败', 1.5);
							}
						});
                    } else {
                        this.$message.warning('请先选择要同步的方式', 1.5);
                    };
                };
            },
		}
	};
</script>
<style lang="less" scoped>
	.card-item {
		transition: 0.3s all;
		cursor: pointer;
		width: 181px;
		border: 1px solid #F0F2F5;
		border-radius: 10px;
		padding-bottom: 15px;
		.img-box{
			padding: 40px 20px 20px;
			.card-icon {
				color: #1890ff;
				font-size: 40px;
				display: block;
			}
		}
	}
    .selected-card {
		position: relative;
        border: 1px solid #1890ff;
		overflow: hidden;
    }
	// 对号
    .selected-card::after {
      content: "";
      position: absolute;
      bottom: 5px;
      right: 7px;
      width: 13px;
      height: 22px;
      border-width: 0 4px 4px 0;
      border-color: white;
      border-style: solid;
      transform: rotate(45deg);
    }
    // 蓝色三角
    .selected-card::before {
      content: "";
      position: absolute;
      bottom: -5px;
      right: -21px;
      transform: rotate(-45deg);
      width: 0;
      height: 0;
      border-top: 32px solid #1890ff;
      border-left: 32px solid transparent;
      border-right: 32px solid transparent;
	  border-bottom-left-radius: 8px;  /* 添加这一行 */
  border-bottom-right-radius: 8px; /* 添加这一行 */
    }
	.card-item:hover {
		transform: scale(1.02);
		border: 1px solid #1890ff;
		box-shadow: 3px 5px 15px rgba(40, 40, 40, 0.36);
	}
	.text-box{
		text-align: center;
		.title{
			font-size: 16px;
			color: #171a1d;
			font-weight: 600;
			margin-bottom: 5px;
		}
	}
</style>
